<!-- 供应商独立模板 首页 -->
<template>
  <div id="alone_template_home">
    <van-search v-model="keword" show-action :placeholder="$i18n.t('base.searchProducts')" shape="round" @focus="onSearch(0)" style="position: sticky;top: 0;z-index: 999;">
      <template #action>
        <van-button round type="info" size="small" @click.stop="switchLanguage" color="var(--themeBaseColor)">中/Pyc</van-button>
      </template>
    </van-search>

    <div class="mt-10 ml-10 mr-10">
      <van-swipe class="my-swipe" indicator-color="white" :autoplay="2000"  lazy-render>
        <van-swipe-item v-for="(item, index) in slide" :key="index">
          <img class="b-radius-8 " :src="item.thumb" alt="" @click.stop="navigateTo({ url: item.link })"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="mt-10 ml-10 mr-10 b-radius-8 bg-fff">
      <van-swipe class="category-swipe" indicator-color="white" lazy-render>
        <van-swipe-item v-for="(item, index) in category" :key="index">
          <div class="category-box ">
            <div class="category-item mt-10" v-for="Child in item" :key="Child.id" @click.stop="onSearch(Child.id)">
              <img :src="Child.thumb" alt="" />
              <div>{{ Child.name }}</div>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="mt-10 ml-10 mr-10 flex">
      <div v-for="(item, index) in adv" :key="index" class="adv-main b-radius-8">
        <img :src="item.img" alt="" @click.stop="navigateTo({ url: item.link })">
      </div>
    </div>

    <div class="mt-10 ml-10 mr-10 grid-3">
      <div v-for="(item, index) in list" :key="index">
        <div class="goods-item bg-fff b-radius-8 t-l" @click="goToUrl('goods',{id: item.id})">
          <div class="goods-img">
            <img :src="item.thumb" alt="" />
          </div>
          <div class="p-8">
            <div class="f-14 good-title line-clamp-2">{{ item.title }}</div>
            <div class="f-15 f-bold color-F15353"><em class="f-12">￥</em>{{ item.price }}</div>
          </div>
        </div>
      </div>
    </div>

    <div style="height: 10rem;"></div>
  </div>
</template>

<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      keword: "",
      slide: null,
      category: null,
      adv: null,

      list: [],
      current_page: 1,
      last_page: 1,
      isLoadMore: true,
    };
  },

  activated() {
    if(this.list.length == 0) {
      this.getData();
    }
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    onSearch( cid = 0){
      let supplier_alone_id = this.fun.getKey('supplier_alone_id') || sessionStorage.getItem("supplier_alone_id") || null; //供应商独立模板，获取供应商id
      let params = { sid: supplier_alone_id };
      if(cid){
        params.cid = cid;
      }
      this.$router.push(this.fun.getUrl("SupplierSearch", params));
    },
    switchLanguage() {
      this.$i18n.locale = this.$i18n.locale == "en" ? "ru" : "en"; // 切换语言
      window.localStorage.setItem('localeLang', this.$i18n.locale);
      // 刷新页面
      window.location.reload();
    },
    async getData() {
      let { result, msg, data } = await $http.get("plugin.supplier-alone-temp.frontend.index",{},".");
      if (result == 0) return this.$toast(msg);
      this.slide = data.slide;
      this.adv = data.adv;
      this.category = this.fun.chunk(data.category, 8);
      this.list = data.goods.data;
      this.current_page = data.goods.current_page;
      this.last_page = data.goods.last_page;
    },
    async getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      this.isLoadMore = false;
      let page = this.current_page + 1;
      let { result, msg, data } = await $http.get("plugin.supplier-alone-temp.frontend.index", { page }, ".");
      this.isLoadMore = true;
      if (result == 0) return this.$toast(msg);
      this.list = this.list.concat(data.goods.data);
      this.current_page = data.goods.current_page;
    },
    navigateTo( { url } ) {
      if(!url) return;
      // 跳转h5链接
      window.location.href = url;
    },
    goToUrl(name, params = {}, query = {}) {
      if (!name) return;
      this.$router.push(this.fun.getUrl(name, params, query));
    },
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.mt-10 {
  margin-top: 0.75rem;
}
.mb-10 {
  margin-bottom: 0.75rem;
}
.mr-10 {
  margin-right: 0.75rem;
}
.ml-10 {
  margin-left: 0.75rem;
}
.b-radius-8 {
  border-radius: 0.5rem;
}
.bg-fff{
  background-color: #fff;
}
.color-F15353{
  color: #F15353;
}
.p-8 {
  padding: 0.5rem;
}
.my-swipe {
  img {
    width: 100%;
  }
}
.category-swipe {
  .category-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: 0.75rem;
  }
  .category-item {
    img {
      width: 3rem;
      height: 3rem;
      background: #f0f0f1;
      border-radius: 0.875rem;
    }
  }
}
.flex-wrap {
  flex-wrap: wrap;
}
.adv-main {
   width: 50%;
    height: 100%;
    overflow: hidden;
    margin-left: 0.625rem;
   img{
    width: 100%;
    display: block;
   }
}
.adv-main:first-child{
  margin-left: 0;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px 8px;
}
.goods-item {
  overflow: hidden;
  .goods-img {
    padding-bottom: 100%;
    width: 100%;
    height: 0;
    position: relative;
  }
  img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
     top: 0;
     left: 0;

  }
  .good-title {
    height: 2.25rem;
  }
}
</style>
